<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="./jquery.js"></script>
  </head>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    td {
      text-align: center;
    }
    #mask {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.5);
      display: none;
    }
    .addly {
      background-color: #ccc;
      position: fixed;
      top: 50%;
      left: 50%;
      width: 400px;
      height: 300px;
      border-radius: 10px;
      margin-left: -200px;
      margin-top: -150px;
      text-align: center;
      padding-top: 50px;
      border: 1px solid #ccc;
      z-index: 99;
      display: none;
    }
    #tips {
      border-radius: 10px;
      width: 500px;
      height: 40px;
      line-height: 40px;
      background: #fa7272;
      position: fixed;
      top: 20%;
      left: 34%;
      z-index: 999;
      display: none;
      text-align: center;
    }
    tbody tr:nth-child(even) {
      background-color: rgb(209, 234, 177);
    }
    tbody tr:nth-child(odd) {
      background-color: #ccc;
    }
  </style>
  <body>
    <button id="add">添加留言</button>
    <div class="addly">
      <div>留言标题：<input type="text" id="ly-title" /></div>
      <br />
      <br />
      <div>留言人：<input type="text" id="ly-name" /></div>
      <br />
      <br />
      <div>留言内容：<textarea id="ly-content"></textarea></div>
      <br />
      <br />
      <button id="send">发 布</button>
    </div>
    <table border="1" style="width: 800px">
      <thead>
        <th><input type="checkbox" id="all" /></th>
        <th>ID</th>
        <th>标题</th>
        <th>内容</th>
        <th>留言人</th>
        <th>时间</th>
        <th>操作</th>
      </thead>
      <tbody></tbody>
    </table>
    <button id="dels">删除选中</button>
    <div id="tips"></div>
    <div id="mask"></div>
  </body>
  <script>
    function del(id) {
      $.ajax({
        url: 'https://liu.zzgoodqc.cn/del/' + id,
        dataType: 'json',
        success: function (res) {
          if (res.code == 200) {
            $('#tips')
              .html('删除成功')
              .css({
                background: 'rgb(168, 224, 167)',
                color: '#000',
              })
              .show()
            setTimeout(function () {
              $('#tips').hide()
            }, 1000)
            getList()
          }
        },
      })
    }
    $(function () {
      $('#dels').click(function () {
        $("input[type='checkbox']:checked").each(function () {
          del($(this).attr('data-id'))
        })
      })
      $('#all').change(function () {
        $('tbody input').prop('checked', $(this).prop('checked'))
      })
      $('tbody').on('click', 'button', function () {
        if ($(this).html() == '删除') {
          if (confirm('确定要删除吗？')) {
            del($(this).attr('data-id'))
          }
        }
        console.log(this)
      })
      getList()
      // 添加留言
      $('#add').click(function () {
        $('#mask').show()
        $('.addly').show()
      })
      $('#mask').click(function () {
        $('#mask').hide()
        $('.addly').hide()
      })
      // 发布留言
      $('#send').click(function () {
        var title = $('#ly-title').val(),
          name = $('#ly-name').val(),
          content = $('#ly-content').val()
        if (!title || !name || !content) {
          $('#tips')
            .html('请填写完整信息')
            .css({
              background: '#fa7272',
              color: '#000',
            })
            .fadeIn(500)
          //异步机制
          setTimeout(function () {
            $('#tips').fadeOut(100)
          }, 2000)
          return
        }
        $.ajax({
          url: 'https://liu.zzgoodqc.cn/lyb/add',
          method: 'post',
          data: {
            title: title,
            content: content,
            name: name,
          },
          dataType: 'json',
          success: function (res) {
            $('#tips')
              .html('发布成功')
              .css({
                background: 'rgb(168, 224, 167)',
                color: '#000',
              })
              .fadeIn(500)
            //异步机制
            setTimeout(function () {
              $('#tips').fadeOut(100)
              $('#mask').click()
            }, 2000)
            getList()
          },
        })
      })
    })
    //获取留言列表 并显示到表格内
    function getList() {
      $.ajax({
        url: 'https://liu.zzgoodqc.cn/lyb',
        dataType: 'json',
        success: function (res) {
          res.data.sort(function (a, b) {
            return b.id - a.id
          })
          var str = ''
          for (var i in res.data) {
            str += `<tr>
                        <td><input type="checkbox" data-id='${res.data[i].id}' ></td>
                        <td>${res.data[i].id}</td>
                        <td>${res.data[i].title}</td>
                        <td>${res.data[i].content}</td>
                        <td>${res.data[i].name}</td>
                        <td>${res.data[i].created_at}</td>
                        <td>
                          <button data-id='${res.data[i].id}'>删除</button>
                          <button>编辑</button>
                        </td>
                      </tr>`
          }
          $('tbody').html(str)
        },
      })
    }
  </script>
</html>
